<template>
	<view class="app">
		<view class="nav">
			<view class="navLeft">
				<view @click="onClickLeft">
					<uni-icon type="back" size="30" color="#DE4E49"></uni-icon>
				</view>
				<view>阅读历史</view>
			</view>
			<view class="navRight">清除</view>
		</view>

		<!-- 图书列表 -->
		<view v-for="l in list" class="list" :key="l">
			<view class="left">
				<image style="width: 65px;height: 85px;border-radius: 5%;" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg"></image>
			</view>
			<view class="listRight">
				<view class="rTitle">家园</view>
				<view class="rContent">阅读到：第一章，盛世</view>
				<view class="listBottom">上次阅读时间：2019-07-22 09:23</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		uniNavBar,
		uniIcon,
		uniTag
	} from "@dcloudio/uni-ui"
	export default {
		data() {
			return {
				list: [1, 2, 3, 4],
			}
		},
		components: {
			uniNavBar,
			uniIcon,
			uniTag
		},
		methods: {
			onClickLeft() {
				this.$router.go(-1); //返回上一层
			}
		}
	}
</script>

<style>
	.app {
		color: #5D5D5D;
		background-color: rgb(255, 255, 253);
	}

	.nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #EAEAEA;
		margin-top: 3%;
		margin-bottom: 3%;
		padding-bottom: 2%;
		color: #DE4E49;
	}

	.navLeft {
		display: flex;
		align-items: center;
	}

	.navRight {
		padding-right: 10px;
		font-size: 16px;
	}


	.list {
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
		padding: 10px 15px;
	}

	.listRight {
		margin-left: 5%;

	}

	.rTitle {
		font-family: cursive;
		font-size: 26px;
		color: black;
	}

	.rContent {
		color: #A6A6A6;
		font-size: 16px;
		padding-top: 1%;
	}

	.listBottom {
		font-size: 14px;
		margin-top: 5%;
		color: RGB(188,188,188);
	}
</style>
